<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>我的伙伴</title>
		<link rel="stylesheet" th:href="@{/css/jquery.mobile-1.4.5.min.css }"/>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/jquery.mobile-1.4.5.min.js}"></script>
		<link rel="stylesheet" th:href="@{/css/iconfont.css}"/>
		<style>
			#list_view li,input {
				background-color:rgba(0,0,255,0);
			}
			#img_id .ui-block-a{
				width: 30%;
			}
			#img_id .ui-block-b{
				width: 30%;
			}
			#img_id .ui-block-c{
				width: 30%;
			}
			#img_id .ui-block-c p{
				font-size: 30px;
				width: 100%;
				display: block;
				text-align: center;
			}
			
			#name,#emial,#tel p{
				text-align: center;
			}
			#emial .ui-block-b{
				width: 20%;
			}
			#emial .ui-block-c{
				width: 40%;
			}
			#name .ui-block-b{
				width: 20%;
			}
			#name .ui-block-c{
				width: 40%;
			}
			#tel .ui-block-b{
				width: 20%;
			}
			#tel .ui-block-c{
				width: 40%;
			}
		</style>

		<script type="text/javascript">
			$(document).ready(function(){
				var markup ='';
				var userhead=window.sessionStorage.getItem("userhead");
				var user = JSON.parse(window.sessionStorage.getItem("user"));
				markup+='<li><div class="ui-grid-b" id="img_id"><a href="/ViewController/toChangeHead" data-ajax="false">';
				markup+='<div class="ui-block-a"><div class="ui-bar ui-bar-c">';
				if(userhead=='""'){
					markup+='<img src="image/logo.png" width="100%" style="border-radius:100%;"/>';
				}else{
					markup+='<img src='+userhead+' width="100%" style="border-radius:100%;"/>';
				}
				markup+='</div></div></a>';
				markup+='<div class="ui-block-b"></div>';
				markup+='<div class="ui-block-c">';
				markup+='<p>'+user.userid+'</p>';
				markup+='</div></div></li>';
				markup+='<li><div class="ui-grid-b" id="name"><div class="ui-block-a">';
				markup+='<p>昵称</p></div><div class="ui-block-b"></div>';
				markup+='<div class="ui-block-c"><p>'+user.name+'</p>';
				markup+='</div></div></li><li>';
				markup+='<div class="ui-grid-b" id="emial"><div class="ui-block-a">';
				markup+='<p>邮箱</p></div><div class="ui-block-b"></div><div class="ui-block-c">';
				markup+='<p>'+user.email+'</p>';
				markup+='</div></div></li>';
				markup+='<li><div class="ui-grid-b" id="tel"><div class="ui-block-a">';
				markup+='<p>电话</p></div><div class="ui-block-b"></div><div class="ui-block-c">';
				markup+='<p>'+user.tel+'</p>';
				markup+='</div></div></li>';
				// markup+="<li><lable>邮箱：</lable><input type='text' style='height: 20px' readonly='readonly' value="+email+">"
				// markup+="<li><lable>电话：</lable><input type='text' style='height: 20px' readonly='readonly' value="+tel+">"
				$("#list_view").html(markup);
				$("#list_view").trigger("create").listview("refresh");
				});
				// 
		</script>
		<script>
			function logout(){
				window.sessionStorage.clear();
				window.location = "/ExperiecneCotroller/getAllExperience";
				$.post("/UserController/doLogout", function (resukt) {
					if(resukt=="success"){
						console.log("登出成功")
					}
				});
			}
			function edit(){
				window.location = "/ViewController/toEditUser";
			}
		</script>
	</head>
	
	<body>
		<div data-role = "page">
			<div data-role = "header">
				<h1>账号信息</h1>
				<a href="/ExperiecneCotroller/getAllExperience" data-ajax = "false" class="ui-btn-right" data-icon = "delete">关闭</a>
			</div>
			<div data-role = "content">
				<h3>欢迎您</h3>
				<div data-role = "controlgroup" style="padding: 20px;">
					<ul data-role = "listview" id="list_view">
						<!-- <li>
							<div class="ui-grid-b" id="img_id">
								<a href="changeHead.html" data-ajax="false">
								<div class="ui-block-a">
									<div class="ui-bar ui-bar-c">
										
										<img src="image/logo.png" width="100%"/>
										
									</div>
								</div>
								</a>
								<div class="ui-block-b"></div>
								<div class="ui-block-c">
									<p>编号</p>
								</div>
							</div>
						</li>
						<li>
							<div class="ui-grid-b" id="name">
								<div class="ui-block-a">
									<p>昵称</p>
								</div>
								<div class="ui-block-b">
								</div>
								<div class="ui-block-c">
									<p>昵称</p>
								</div>
							</div>
						</li>
						<li>
							<div class="ui-grid-b" id="emial">
								<div class="ui-block-a">
									<p>邮箱</p>
								</div>
								<div class="ui-block-b">
								</div>
								<div class="ui-block-c">
									<p>960578615@qq.com</p>
								</div>
							</div>
						</li>
						<li>
							<div class="ui-grid-b" id="tel">
								<div class="ui-block-a">
									<p>电话</p>
								</div>
								<div class="ui-block-b">
								</div>
								<div class="ui-block-c">
									<p>13450169928</p>
								</div>
							</div>
						</li> -->
						
					</ul>
				</div>
				<a data-ajax = "false" data-role = "button" onclick="edit()">编辑</a>
				<a data-ajax = "false" data-role = "button" onclick="logout()">登出</a>
			</div>
		</div>
	</body>
</html>
